<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="frontend" content="width=device-width,initial-scale=1.0" />
    <title>上课</title>
    <link rel="stylesheet" href="hw.css" />
    <script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.1/build/qrcode.min.js"></script>
  </head>
  <body>
    <form action="./index.html" method="get">
    <span style="color: blue"><b>&nbsp;欢迎注册会员</b></span>

      <div class="comment">
        <label for="phone"><b>手机号码：</b></label
        ><input
          type="text"
          name="phone"
          id="phone"
          placeholder="11位手机号"
          maxlength="11"
          required
        /><span class="must">必填</span>
      </div>

      <div class="comment">
        <label for="pwd"><b>创建密码：</b></label
        ><input
          type="password"
          name="pwd"
          id="pwd"
          placeholder="8位密码"
          maxlength="8"
          required
        /><span class="must">必填</span>
      </div>

      <div class="comment">
        <label for="email"><b>注册邮箱：</b></label
        ><input
          type="text"
          name="email"
          id="email"
          placeholder="例如:wustzz@sina.com"
          required
        /><span class="must">必填</span>
      </div>

      <div class="comment">        <!--使用js实现验证码的生成和刷新-->
        <label for="yanzheng"><b>验证码：</b></label>
        <input type="text" name="yanzheng" id="yanzheng" />
        <span id="verifyCode">1234</span>
        <!--button or img-->
        <img src="./imgs/arrow_03.png" id="refreshBtn">
      </div>

      <div class="comment">
        <label for="sex"><b>性别：</b></label>
        <input type="radio" name="sex" id="sex-man" value="man"/>男
        <input type="radio" name="sex" id="sex-woman" value="woman"/> 女
      </div>

      <div class="comment">
        <label for="birth"><b>生日：</b> </label>

        <input type="text" name="birth" id="birth" value="年 /月/日" />
      </div>

      <div class="comment">
        <label for="age"><b>年龄：</b> </label>

        <input type="text" name="age" id="age" />
      </div>

      <div class="comment">
        <label for="position"><b>籍贯：</b> </label>
        <select name="position-sheng" id="position">    <!--省-->
          <option value="湖北省" selected>湖北省</option>    
          <option value="湖南省">湖南省</option>           
        </select>
        <select name="position-shi" id="position">          <!--市-->
          <option value="武汉" selected>武汉</option>
          <option value="长沙">长沙</option>
        </select>
      </div>

      <div class="comment">
        <label for="qualification"><b>个人学历：</b></label>
        <select name="qualification" id="qualification" selected>
          <option value="本科">本科</option>
          <option value="研究生">研究生</option>
          <option value="博士">博士</option>
        </select>
      </div>

      <div class="comment">
        <label for="score">月薪：</label>
        <input
          type="range"
          name="score"
          id="score"
          min="0"
          max="10000"
          step="1"
          value="5000"
        />
        <span id="msg"></span>
      </div>

      <div class="comment">
        <label for="liking">个人爱好：</label>
        <input type="checkbox" name="sing" id="liking" />唱歌
        <input type="checkbox" name="run" id="liking" />跑步
        <input type="checkbox" name="swim" id="liking" />游泳
      </div>

      <div class="comment">
        <label for="pic">个人照片：</label>
        <input type="file" name="pic" id="pic" />
        <img src="" id="preview" alt="照片预览" style="display: none;">
        <!--没有上传照片时不显示-->
      </div>

      <div class="comment">
        <label for="profile">个人简介：</label>
        <textarea name="profile" id="profile" cols="30" rows="10"></textarea>
      </div>

      <div class="comment btn">
        <input type="submit" class="btn-submit" value="提交" />
        <input type="reset" class="btn-reset" value="重填" />
      </div>
    </form>

    <script>
      var msg = document.getElementById("msg");
      //（onload）当整个页面加载完后，执行函数
      window.onload = function () {
        msg.innerHTML = document.getElementById("score").value;
      };
      document.getElementById("score").onchange = function () {
        msg.innerHTML = this.value;
      };

      //实现图片预览效果
      document.getElementById("pic").addEventListener("change", function (e) {
            const file = e.target.files[0];
            const preview = document.getElementById("preview");
            
            if (file && file.type.startsWith("image/")) {
              // 显示预览图片
              preview.src = URL.createObjectURL(file);
              preview.style.display = "inline-block";
            } else if (file) {
              // 如果选择的不是图片文件
              alert('请选择图片文件！');
              e.target.value = ''; // 清空文件选择
              preview.style.display = "none";
            } else {
              // 没有选择文件或取消选择
              preview.style.display = "none";
              preview.src = "";
            }
          });

      // 监听表单重置事件，确保重置时隐藏预览图片
      document.querySelector('.btn-reset').addEventListener('click', function() {
        const preview = document.getElementById("preview");
        preview.style.display = "none";
        preview.src = "";
      });

      // 生成随机验证码的函数
      function generateVerifyCode() {
            const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
            let code = '';
            for (let i = 0; i < 4; i++) {
                const randomIndex = Math.floor(Math.random() * chars.length);
                code += chars[randomIndex];
            }
            return code;
        }

        // 刷新验证码
        function refreshVerifyCode() {
            const verifyCodeElement = document.getElementById('verifyCode');
            verifyCodeElement.textContent = generateVerifyCode();
        }

        // 为刷新按钮绑定点击事件
        const refreshBtn = document.getElementById('refreshBtn');
        refreshBtn.addEventListener('click', refreshVerifyCode);
    </script>
  </body>
</html>
